<template>
  <d2-container>
    <!-- 账户操作订单 -->
    <template slot="header">

      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-width="auto" label-position="left" :inline="true">

        <el-form-item label="订单类型" size="mini">
          <el-select v-model="mainQuery.orderType" placeholder="所有" clearable @change="fetchMainData">
            <el-option
              v-for="item in orderTypeOptions"
              :key="item.value" 
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="账户类型" size="mini">
          <el-select v-model="mainQuery.accountType" placeholder="所有" clearable @change="fetchMainData">
            <el-option
              v-for="item in accountTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="步骤状态" size="mini">
          <el-select v-model="mainQuery.startType" placeholder="所有" clearable @change="fetchMainData">
            <el-option
              v-for="item in startTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="核算时间" size="mini">
          <el-date-picker
            v-model="mainQuery.settleTimeRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
          </el-button-group>
        </div>
        <div class="right">
          <el-button class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading" size="mini">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="fetchMainData" :loading="mainTable.loading" size="mini">查询</el-button>
        </div>
      </div>
    </template>

    <!--主列表数据-->
      <!-- :rowHandle="mainTable.rowHandle" -->

    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      @current-change="onMainCurrentChange"
      @custom-emit-handle-order="handleOrderDetail"
      @selection-change=""
    ></d2-crud>

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        >
      </el-pagination>
    </template>

    <dialog-info ref="dialog-info" @dialog-close="fetchMainData"></dialog-info>

  </d2-container>
</template>

<script>

import util from '@/libs/util';

import ApiMain from '@/api/trade.detail';

import DialogInfo from '@/views/trade/detail/dialog-info';

export default {
  mixins: [
  ],
  components: {
    DialogInfo,
  },
  data () {
    return {

      accountTypeOptions: [],
      typeOptions       : [],
      stepOptions       : [],

      mainQueryRaw: null,
      mainQuery: {
        terNo          : '',
        tradeNo        : '',
        settleTimeRange: [],
      },
    orderTypeOptions:[
        {
        label:"扣款",
        value:'1'
      },
       {
        label:"冻结",
        value:'2'
      }, {
        label:"解冻",
        value:'3'
      },
       {
        label:"充值",
        value:'4'
      }
    ],
    accountTypeOptions:[  
      {
        label:"可用账户",
        value:'1'
      },
       {
        label:"冻结账户",
        value:'2'
      }
    ],
    startTypeOptions:[  
              {
        label:"待审核",
        value:'1'
      },
       {
        label:"初审通过",
        value:'2'
      }, {
        label:"终审通过",
        value:'3'
      },
       {
        label:"终审驳回",
        value:'4'
      },{
        label:"初审驳回",
        value:'5'
      }
    ],
      mainTable: {
        loading: false,
        options: {
          border             : true,
          stripe             : true,
          highlightCurrentRow: true,
          emptyText          : '暂无数据',
          size               : 'mini',
        },
        indexRow: {
          title:'序号',
          width: "80",
          align:'center'
        },
        indexRow: null,
        allowSelect: false,
        columns: [
          // 交易流水号
          {title: '流水号', key: 'tradeNo', align: 'center', showOverflowTooltip: false,  width: '180', },
          // 账户类型
           {title: '账户类型', key: 'tradeNo', align: 'center', showOverflowTooltip: false,  width: '180', },
             // 订单类型
           {title: '订单类型', key: 'tradeNo', align: 'center', showOverflowTooltip: false, width: '180', },
               // 步骤状态
           {title: '步骤状态', key: 'tradeNo', align: 'center', showOverflowTooltip: false,width: '180', },
          // 交易金额
          {title: '操作金额', key: 'mchTransAmount', align: 'right', showOverflowTooltip: true, minWidth: '140', formatter(row, col, val, index) {
            // return row.mchTransCurrency + ' ' + (val / 100).toFixed(2);
            return !!val ? row.mchTransCurrency + ' ' + (val / 100).toFixed(2) : '-';
          }},
              // 操作币种
           {title: '操作币种', key: 'tradeNo', align: 'center', showOverflowTooltip: true,width: '180', },
               // 申请备注
           {title: '申请备注', key: 'tradeNo', align: 'center', showOverflowTooltip: true, width: '180', },
               // 申请时间
           {title: '申请时间', key: 'tradeNo', align: 'center', showOverflowTooltip: true,width: '180', },
               // 初审备注
           {title: '初审备注', key: 'tradeNo', align: 'center', showOverflowTooltip: true,  width: '180', },
               // 初审时间
           {title: '初审时间', key: 'tradeNo', align: 'center', showOverflowTooltip: true, width: '180', },
                // 终审备注
           {title: '终审备注', key: 'tradeNo', align: 'center', showOverflowTooltip: true,  width: '180', },
               // 终审时间
           {title: '终审时间', key: 'tradeNo', align: 'center', showOverflowTooltip: true,  width: '180', },
          // 系统处理状态
          {title: '系统处理状态', key: 'settleTime', align: 'center', showOverflowTooltip: true, minWidth: '180'},
        ],
        // rowHandle: {
        //   width: '120',
        //   align: 'center',
        //   fixed: 'right',
        //   custom: [
        //     {
        //       text: this.$t('page-trade-detail.d2-crud.column-detail'),
        //       type: 'default',
        //       size: 'mini',
        //       emit: 'custom-emit-handle-order'
        //     },
        //   ]
        // },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize   : 50,
          total      : 0,
          pageSizes  : [50, 100, 200]
        },
        current: null,
      },

    }
  },
  mounted () {

    this.mainQueryRaw = Object.copy(this.mainQuery);

    var re = this.fetchOptions()
    .finally(() => {
      this.resetMainData();
    });

  },

  methods: {

    renderMainData (re) {

      re.list.forEach(item => {
        item.floatAmount            = (item.amount / 100).toFixed(2);

        item.strAccountType = util.tool.strFromOptions(item.accountType, this.accountTypeOptions, '-');
        item.strType = util.tool.strFromOptions(item.type, this.typeOptions, '-');
        item.strStep = util.tool.strFromOptions(item.step, this.stepOptions, '-');
      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange (val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange (val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    buildMainQuery () {

      var query = {
        page  : this.mainTable.pagination.currentPage,
        limit : this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData () {

      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    async fetchOptions () {

      var re = [
        { value: 1, label: '待审核', },
        { value: 2, label: '审核驳回', },
        { value: 3, label: '审核通过', },
        { value: 4, label: '复核驳回', },
        { value: 5, label: '复核通过', },
        { value: 6, label: '已出款', },
      ];
      this.stepOptions = re;

      var re = await ApiMain.getAccountTypeOptions();
      this.accountTypeOptions = re;

      var re = await ApiMain.getTypeOptions();
      this.typeOptions = re;

    },

    async fetchMainData () {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) {}


      this.mainTable.loading = false;

    },

    onMainCurrentChange (now, old) {
      this.mainTable.current = now;
    },

    handleOrderDetail ({index, row}) {
      this.$refs['dialog-info'].show(row.id);
    },
  }
}
</script>

<style>

</style>
